<template>
  <div class="search-bar">
    <div class="search-item">
      <el-select
        v-model="firstCondition"
        placeholder="请选择搜索条件"
        class="condition-select"
        @change="handleFirstConditionChange"
      >
        <el-option
          v-for="item in searchOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input
        v-model="firstSearchQuery"
        :placeholder="getPlaceholder(firstCondition)"
        class="search-input"
        clearable
        @input="handleSearch"
      />
    </div>
    <div class="search-item">
      <el-select
        v-model="secondCondition"
        placeholder="请选择搜索条件"
        class="condition-select"
      >
        <el-option
          v-for="item in remainingOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input
        v-model="secondSearchQuery"
        :placeholder="getPlaceholder(secondCondition)"
        class="search-input"
        clearable
        @input="handleSearch"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'SearchBar',
  data() {
    return {
      searchOptions: [
        { label: 'ID', value: 'id' },
        { label: '接口ID', value: 'apiId' },
        { label: '数据描述', value: 'description' },
        { label: '数据', value: 'data' },
        { label: '创建日期', value: 'createDate' }
      ],
      firstCondition: '',
      secondCondition: '',
      firstSearchQuery: '',
      secondSearchQuery: ''
    }
  },
  computed: {
    remainingOptions() {
      return this.searchOptions.filter(option => option.value !== this.firstCondition)
    }
  },
  methods: {
    handleFirstConditionChange() {
      // 如果第二个条件与第一个条件相同，则清空第二个条件
      if (this.secondCondition === this.firstCondition) {
        this.secondCondition = ''
      }
      this.handleSearch()
    },
    getPlaceholder(condition) {
      const option = this.searchOptions.find(opt => opt.value === condition)
      return option ? `请输入${option.label}` : '请输入搜索内容'
    },
    handleSearch() {
      this.$emit('search', {
        first: {
          condition: this.firstCondition,
          value: this.firstSearchQuery
        },
        second: {
          condition: this.secondCondition,
          value: this.secondSearchQuery
        }
      })
    }
  }
}
</script>

<style scoped>
.search-bar {
  display: flex;
  gap: 20px;
  width: 800px;
}

.search-item {
  display: flex;
  gap: 10px;
  flex: 1;
}

.condition-select {
  width: 120px;
}

.search-input {
  flex: 1;
}
</style> 